//商票易贴审批中页面
<template>
  <div class="box">
    <div class="matter">
      <div class="content">
        <div class="f1">
          <!-- 面包屑组件 -->
          <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
            <span class="back" @click="goBack">返回上一页</span>
            <el-breadcrumb-item>
              <img src="@/assets/user/icon.png" alt="" />
              <span class="span">金融服务</span>
            </el-breadcrumb-item>
            <el-breadcrumb-item>
              <span class="span" style="color: #666">商票驿</span>
            </el-breadcrumb-item>
            <el-breadcrumb-item>
              <span class="span" style="color: #666">我的票据</span>
            </el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <div class="f2">
          <div class="title">
            <h3>我的票据</h3>
          </div>
          <div class="user-search">
            <div class="search-input">
              <input
                style="
                  border-radius: 0.1042rem;
                  border-radius: 0.099rem;
                  padding: 0.0521rem 0.0521rem;
                "
                @keyup.enter="search()"
                type="text"
                placeholder="请输入承兑人或票据号"
                v-model="acceptorname"
              />
              <img @click="search()" src="@/assets/shangpiao/组26.png" alt="" />
            </div>
            <div>
              <span>票据金额</span>
              <el-select v-model="startbillnumber" placeholder="请选择">
                <el-option key="10" label="全部" value="8918"></el-option>
                <el-option key="1" label="50万以内" value="0-500000"></el-option>
                <el-option key="4" label="50-100万" value="500000-1000000"></el-option>
                <el-option key="2" label="100-300万" value="1000000-3000000"></el-option>
                <el-option key="3" label="300万以上" value="3000000"></el-option>
              </el-select>
            </div>
          </div>
          <template v-if="PJList">
            <div v-loading="loading">
              <table id="table" v-for="(item, index) in PJList" :key="index">
                <thead>
                  <tr>
                    <th scope="col" colspan="5" align="left">
                      <div class="th">
                        <div>
                          <!-- <el-checkbox-group @change="handleSelectionChange(val)">
                    <el-checkbox></el-checkbox
                  ></el-checkbox-group> -->
                          <input
                            @change="handleSelectionChange(item)"
                            type="checkbox"
                            :data-index="index"
                          />
                        </div>
                        <span
                          style="
                            width: 1.3021rem;
                            text-align: center;
                            margin-left: 0.2604rem;
                            display: flex;
                          "
                          ><i>
                            <img
                              v-if="matching(item.commitmentname)"
                              style="
                                width: 0.0938rem;
                                height: 0.0938rem;
                                margin-right: 0.0104rem;
                                margin-top: -0.0104rem;
                              "
                              src="@/assets/shangpiao/银.png"
                              alt=""
                            />
                            <img
                              v-else
                              style="
                                width: 0.0938rem;
                                height: 0.0938rem;
                                margin-right: 0.0104rem;
                                margin-top: -0.0104rem;
                              "
                              src="@/assets/shangpiao/商.png"
                              alt=""
                            /> </i
                          >{{ item.commitmentname }}</span
                        >
                        <!--    -->
                        <span style="width: 1.8229rem; text-align: left"
                          >票据号：<i>{{ item.tickernumber }}</i></span
                        >
                        <span style="width: 1.3021rem; text-align: left"
                          >银行账户：<i>{{ item.commitmentaccount | getData }}</i></span
                        >
                        <!-- <span style="width: 140px; text-align: left"
                    >开户行号：<i>{{
                      item.commitmentnumber | getData
                    }}</i></span
                  > -->
                        <span style="width: 0.7292rem; text-align: left">{{
                          item.inputdate | getDate
                        }}</span>
                      </div>
                    </th>
                  </tr>
                </thead>
                <tbody id="tbody">
                  <tr align="center" valign="center">
                    <td scope="row" rowspan="2" v-viewer>
                      <img :src="item.path" alt="" />
                      <!-- <span>{{ item.path }}</span> -->
                    </td>
                    <td scope="row">票面金额（元）</td>
                    <td scope="row">到期日</td>
                    <td scope="row">融资方案</td>
                    <td scope="row">操作</td>
                  </tr>
                  <tr align="center">
                    <td scope="row">{{ item.ticketamount | getArea }}</td>
                    <td scope="row">{{ item.maturitydate | getDate }}</td>
                    <td scope="row">
                      {{ item.applyproductsituation | getInte }}
                    </td>
                    <td scope="row" class="td">
                      <span @click="anewEnquiry(item)">重新询价</span>
                      <span @click="compile(item)">编辑</span>
                      <span style="color: #ff6060" @click="del(item)">删除</span>
                    </td>
                  </tr>
                </tbody>
              </table>
              <!-- 分页器 -->
              <div class="pagination">
                <div class="pagination_left">
                  <h6>
                    已选择
                    <h2>{{ quantity }}</h2>
                    张票据
                  </h6>
                  <button class="del" @click="delectPJs">删除</button>
                </div>
                <div class="pagination_rigth">
                  <el-pagination
                    background
                    layout="prev, pager, next"
                    @next-click="nextClick()"
                    @prev-click="prevClick()"
                    @current-change="handlePageChange"
                    :total="pages * 10"
                  ></el-pagination>
                  <span>共{{ pages }}页</span>
                </div>
              </div>
            </div>
          </template>
          <template v-else>
            <div class="null" v-loading="loading">
              <img src="@/assets/shangpiao/组162.png" alt="" />
              <span>暂无票据信息</span>
            </div>
          </template>

          <!-- 查看票据正反面信息 -->
          <el-dialog title="票面信息" :visible.sync="contractCardbackVisible" width="40%" center>
            <!-- 内容区域 -->
            <div
              v-viewer
              v-if="frontImg.length != 0"
              style="text-align: center; width: 1.5625rem; height: 1.5625rem"
              class="dialog-center"
              @click="contractCardbackVisible = false"
            >
              <img
                v-for="(item, index) in frontImg"
                :key="index"
                style="width: 100%; height: 100%; margin-bottom: 0.0781rem"
                :src="item.path"
                alt=""
              />
              <!-- <img style="width: 100%; height: 100%" :src="reverseImg" alt="" /> -->
              <p style="margin-top: 0.1042rem">点击图片可查看大图</p>
            </div>
            <div v-else style="text-align: center; margin-bottom: 0.1563rem" class="dialog-center">
              <h4>暂无票据资料</h4>
            </div>
            <!-- 按钮区域 -->
            <!--  -->
            <!-- -->
            <div slot="footer" class="dialog-footer">
              <button class="dialog-footer-bnt btn1" @click="contractCardbackVisible = false">
                取 消
              </button>
              <button class="dialog-footer-bnt btn2" @click="contractCardbackVisible = false">
                确 定
              </button>
            </div>
          </el-dialog>
          <el-dialog class="dialog" title="编辑" :visible.sync="compileVisible" width="" center>
            <!-- 内容区域 -->
            <div class="dialog-center">
              <div class="div_img">
                <el-image :src="dialogImgUrl" :preview-src-list="srcList"> </el-image>
              </div>

              <ul>
                <li>
                  <el-form ref="forms" :model="form" label-width="140px" :rules="rules">
                    <el-form-item label="票据号码" prop="a">
                      <el-input type="string" v-model="form.a" />
                    </el-form-item>
                  </el-form>
                </li>
                <li>
                  <el-form ref="forms" :model="form" label-width="140px" :rules="rules">
                    <el-form-item label="承兑人名称" prop="c">
                      <el-input v-model="form.c" placeholder=""></el-input>
                    </el-form-item>
                  </el-form>
                </li>
                <li>
                  <el-form ref="forms" :model="form" label-width="140px" :rules="rules">
                    <el-form-item label="票面金额" prop="b">
                      <el-input
                        @blur="costChangeB"
                        @focus="
                          () => {
                            this.form.b = remoney(this.form.b)
                          }
                        "
                        @input="limitInput($event, 'b')"
                        v-model="form.b"
                        placeholder=""
                      ></el-input>
                      <p
                        style="
                          position: absolute;
                          right: 0.0833rem;
                          top: 0px;
                          z-index: 99;
                          font-size: 0.0833rem;
                        "
                      >
                        元
                      </p>
                    </el-form-item>
                  </el-form>
                </li>
                <li>
                  <!-- <el-form
              ref="forms"
              :model="form"
              label-width="140px"
              :rules="rules"
            >
              <el-form-item label="承兑人名称" prop="c">
                <el-input v-model="form.c" placeholder=""></el-input>
              </el-form-item>
            </el-form> -->
                  <el-form ref="forms" :model="form" label-width="140px" :rules="rules">
                    <el-form-item label="票据到期日" prop="d">
                      <el-date-picker
                        :clearable="false"
                        v-model="form.d"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder=""
                      >
                      </el-date-picker>
                    </el-form-item>
                  </el-form>
                </li>
                <li>
                  <el-form ref="forms" :model="form" label-width="140px" :rules="rules">
                    <el-form-item label="承兑人银行账号" prop="e">
                      <el-input v-model="form.e" placeholder=""></el-input>
                    </el-form-item>
                  </el-form>
                </li>
                <li>
                  <el-form ref="forms" :model="form" label-width="140px" :rules="rules">
                    <el-form-item label="承兑人开户行行号" prop="f">
                      <el-input v-model="form.f" placeholder=""></el-input>
                    </el-form-item>
                  </el-form>
                </li>
              </ul>
            </div>
            <div slot="footer" class="dialog-footer">
              <button class="dialog-footer-bnt btn1" @click="compileVisible = false">取 消</button>
              <button :disabled="isLock" class="dialog-footer-bnt btn2" @click="updatePJs">
                确 定
              </button>
            </div>
          </el-dialog>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { myPostFetch, getFilePath } from '@/utils'
export default {
  data() {
    return {
      loading: false,
      anewList: null,
      delList: [],
      isLock: false,
      imgUrl: null, //图片
      dialogImgUrl: null, //弹窗图片
      srcList: null,
      quantity: 0, // 选中数量
      list: [],
      PJList: null,
      PJLists: null,
      ticketinfoid: '', //票据id
      // checkVal: false,
      frontImg: [], //票据正面
      contractCardbackVisible: false, //弹出框
      compileVisible: false,
      endbillnumber: '', //票据金额,结束
      endbillnumbers: '8918', //票据金额,结束
      startbillnumber: '', //票据金额,开始
      startbillnumbers: '8918', //票据金额，开始

      acceptorname: '', //承兑人名称
      pageNum: 1, //当前页数
      pageSize: 10, //每页条数
      pages: 1,
      form: {
        a: '',
        b: '',
        c: '',
        d: '',
        e: '',
        f: ''
      },
      // 用户填写资料表格
      addform: {
        b: ''
      },
      // 表单验证
      rules: {
        a: [{ required: true, message: ' ', trigger: 'blur' }],
        b: [{ required: true, message: ' ', trigger: 'blur' }],
        c: [{ required: true, message: ' ', trigger: 'blur' }],
        d: [{ required: true, message: ' ', trigger: 'blur' }],
        e: [{ required: true, message: ' ', trigger: 'blur' }],
        f: [{ required: true, message: ' ', trigger: 'blur' }]
      }
    }
  },
  // 监听器
  watch: {
    startbillnumber() {
      this.pageNum = 1
      this.pages = 1
      let endbillnumber = this.startbillnumber.split('-')[1]
      let startbillnumber = this.startbillnumber.split('-')[0]
      this.startbillnumbers = startbillnumber
      this.endbillnumbers = endbillnumber
      this.getPJList()
    },
    PJLists() {
      setTimeout(() => {
        this.PJList = this.PJLists
      }, 1000)
    }
  },

  mounted() {
    setTimeout(() => {
      this.PJList = this.PJLists
    }, 500)
    this.getPJList()
  },
  // 过滤器
  filters: {
    getArea: function (value) {
      if (!value) return '-'
      let num = Number(value)
      if (isNaN(num)) return '-'
      value = num.toFixed(2)
      // 获取整数部分
      const intPart = Math.trunc(value)
      // 整数部分处理，增加,
      const intPartFormat = intPart.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')
      // 预定义小数部分
      let floatPart = '.00'
      // 将数值截取为小数部分和整数部分
      const valueArray = value.toString().split('.')
      if (valueArray.length === 2) {
        // 有小数部分
        floatPart = valueArray[1].toString() // 取得小数部分
        return intPartFormat + '.' + floatPart
      }
      return intPartFormat + floatPart
    },
    getDate: function (value) {
      if (!value) return value
      let date = value.split(' ')[0]
      return date
    },
    getData: function (value) {
      if (!value || value == '') {
        return '-'
      } else {
        return value
      }
    },
    getInte: function (value) {
      if (!value) return '-'
      value = value.replace(/@/g, ' ')
      return value
    }
  },
  methods: {
    matching: function (value) {
      if (!value) return false
      value = value.split(/银行/g)
      return value.length > 1 ? true : false
      // return value;
    },
    // 获取票据列表 /api/BusinessSPs/PJlist
    async getPJList() {
      this.loading = true
      let url = '/api/BusinessSPs/PJlist'
      let params = {
        startbillnumber: this.startbillnumbers,
        endbillnumber: this.endbillnumbers ? this.endbillnumbers : '',
        acceptorname: this.acceptorname,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }
      let data = await myPostFetch(url, params)
      if (!data.data) return (this.loading = false)
      if (data.code == 100) {
        setTimeout(() => {
          this.loading = false
        }, 1000)
        let list = data.data.list
        this.PJLists = list
        this.pages = data.data.pages
        for (let i = 0; i < list.length; i++) {
          getFilePath(list[i].id).then(res => {
            if (res.data.length != 0) {
              this.PJLists[i].path = res.data[0].path
            }
          })
        }

        if (this.PJLists.length == 0) this.PJLists = null
      }
    },
    // 搜索
    search() {
      this.page = 1
      this.pages = 1
      this.getPJList()
    },
    // 返回上一页
    goBack() {
      this.$router.push('/enquiry')
    },
    changeHash(idName) {
      document.querySelector(idName).scrollIntoView(true)
    },
    // 重新询价
    anewEnquiry(item) {
      let file = item.path
      let params = {
        draftNumber: item.tickernumber,
        totalAmount: item.ticketamount,
        acceptorBankNumber: item.commitmentnumber,
        acceptorAccountNumber: item.commitmentaccount,
        acceptorName: item.commitmentname,
        validToDate: item.maturitydate
      }
      params = JSON.stringify(params)
      sessionStorage.setItem('ocr', params)
      sessionStorage.setItem('file', file)
      this.$router.push('/enquiry')
    },

    // 点击编辑
    async compile(item) {
      let a = []
      this.dialogImgUrl = null
      this.compileVisible = true
      let id = item.id
      this.ticketinfoid = item.ticketinfoid
      this.form.a = item.tickernumber
      this.form.c = item.commitmentname
      this.form.d = item.maturitydate
      this.form.e = item.commitmentaccount
      this.form.f = item.commitmentnumber
      if (parseInt(Number(item.ticketamount), 10) != Number(item.ticketamount)) {
        this.form.b = Number(item.ticketamount).toLocaleString()
      } else {
        this.form.b = Number(item.ticketamount).toLocaleString() + '.00'
      }
      this.addform.b = item.ticketamount
      a.push(item.path)
      this.srcList = a
      // 获取图片
      let { data } = await getFilePath(id)
      if (data.length != 0 || !data) {
        this.dialogImgUrl = data[0].path
      }
    },
    //点击编辑确认按钮
    async updatePJs() {
      this.isLock = true
      setTimeout(() => {
        this.isLock = false
      }, 3000)
      let url = '/api/BusinessSPs/updatePJs'
      let params = {
        billnumber: this.form.a,
        faceamount: this.addform.b,
        acceptorname: this.form.c,
        billdate: this.form.d,
        acceptorbanking: this.form.e,
        acceptorbank: this.form.f,
        pjid: this.ticketinfoid
      }
      if (
        this.form.a.trim() == '' ||
        this.addform.b.trim() == '' ||
        this.form.c.trim() == '' ||
        this.form.d.trim() == '' ||
        this.form.e.trim() == ''
      )
        return this.$Message.error('请填写信息')
      if (this.form.f) {
        let data = await myPostFetch(url, params)
        if (data.code == 100) {
          this.getPJList()
          this.compileVisible = false
        } else {
          return this.$Message.error('修改失败')
        }
      } else {
        return this.$Message.error('请填写信息')
      }
    },
    // 点击单选框
    handleSelectionChange(item) {
      let state = event.target.checked
      if (state) {
        this.quantity += 1
        this.delList.push(item.ticketinfoid)
      } else {
        this.quantity -= 1
        this.delList = this.delList.slice(0, -1)
      }
    },
    // 点击删除按钮批量删除
    async delectPJs() {
      let a = this.delList.join('@')
      let url = '/api/BusinessSPs/delectPJs'
      let params = {
        pjids: a
      }
      let data = await myPostFetch(url, params)
      if (data.code == 100) {
        this.$Message.success('批量删除成功')
        this.$router.go(0)
      }
    },
    // 点击删除按钮单个删除
    async del(item) {
      let ticketinfoid = item.ticketinfoid
      let url = '/api/BusinessSPs/delectPJ'
      let params = {
        pjid: ticketinfoid
      }
      let data = await myPostFetch(url, params)
      if (data.code == 100) {
        this.$Message.success('删除成功')
        this.getPJList()
        return
      }
      this.$Message.error('删除失败')
    },
    costChangeB(e) {
      this.addform.b = this.form.b
      //获取输入的数据，若不写这行，数据可能输不进去
      this.form.b = e.target.value
      //将用户输入的数据，自动转换为带千分符的
      this.form.b = this.fmoney(this.form.b)
    },
    // 点击下一页
    nextClick() {
      this.pageNum += 1
      this.getPJList()
    },
    // 点击上一页
    prevClick() {
      this.pageNum -= 1
      this.getPJList()
    },
    // 点击数字改变page的值
    handlePageChange(currentPage) {
      this.pageNum = currentPage
      this.getPJList()
    },
    // 表单格式转换
    limitInput(value, name) {
      this.addform[name] =
        ('' + value) // 第一步：转成字符串
          .replace(/[^\d^\.]+/g, '') // 第二步：把不是数字，不是小数点的过滤掉
          .replace(/^0+(\d)/, '$1') // 第三步：第一位0开头，0后面为数字，则过滤掉，取后面的数字
          .replace(/^\./, '0.') // 第四步：如果输入的第一位为小数点，则替换成 0. 实现自动补全
          .match(/^\d*(\.?\d{0,2})/g)[0] || ''
    },
    //千分位格式化：10000转为10,000.00
    fmoney(s, n) {
      if (s == '' || s == null || (s == undefined) | isNaN(Number(s))) {
        return s
      }
      s = Number(s) ? Number(s) : s
      n = (n || n == 0) && n > -1 && n <= 20 ? n : 2
      s = parseFloat((s + '').replace(/[^\d\.-]/g, '')).toFixed(n) + ''
      var l = s.split('.')[0].split('').reverse()
      var r = s.split('.')[1]
      var t = ''
      for (var i = 0; i < l.length; i++) {
        t += l[i] + ((i + 1) % 3 == 0 && i + 1 != l.length ? ',' : '')
      }
      if (n > 0) {
        r = '.' + r
      } else if (n == 0) {
        r = ''
      }
      let returnT = t.split('').reverse().join('') + r
      //负数处理
      if (returnT[0] == '-' && returnT[1] == ',') {
        returnT = '-' + returnT.substring(2)
      }
      return returnT
    },
    //千分位反格式化:10,000.00转为10000.00
    remoney(s) {
      let str = ''
      if (s) {
        str = String(s).replace(/,/g, '')
      }
      if (s && (s + '').indexOf('.') > -1 && Number(str)) {
        return String(s).replace(/[^\d\.-]/g, '')
      } else if (s && Number(str)) {
        return str
      } else {
        return s
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.box {
  box-sizing: border-box;
  padding-bottom: 0.5208rem;
  position: relative;
  width: 10rem;
  height: 11.9375rem;
  background-color: rgb(242, 244, 247);
  .matter {
    width: 10rem;
    height: 1.5625rem;
    background: url(@/assets/shangpiao/组152.png);
    background-size: 100% 100%;
    .content {
      margin: 0 auto;
      width: 8.4375rem;
      height: 6.8854rem;
      .f1 {
        display: flex;
        align-items: center;
        width: 8.4375rem;
        height: 0.4115rem;
        // 返回上一页
        .back {
          position: absolute;
          left: 2.6rem;
          font-size: 0.0833rem;
          color: #3f6ef2;
          text-decoration: underline;
          user-select: none;
          cursor: pointer;
        }
        // 面包屑
        .breadcrumb {
          display: flex;
          align-items: center;
          height: 0.3958rem;
          font-size: 0.0833rem;
          .icon {
            margin: 0 0.0521rem 0 0.0208rem;
          }
          .span {
            font-size: 0.0833rem;
            font-family: Source Han Sans SC;
            font-weight: 400;
            color: #999999;
          }
          img {
            width: 0.0938rem;
            height: 0.0938rem;
            margin-right: 0.026rem;
          }
        }
      }
      .f2 {
        box-sizing: border-box;
        width: 8.4375rem;

        background-color: #fff;
        box-shadow: 0rem 0.0469rem 0.0938rem 0px rgba(207, 207, 207, 0.22);
        border-radius: 0.0521rem;
        padding: 0.2604rem;
        .title {
          position: relative;
          display: flex;
          align-items: center;
          width: 100%;
          height: 0.1302rem;
          h3 {
            font-size: 0.1563rem;
            font-family: Source Han Sans SC;
            font-weight: 500;
            color: #000000;
          }
        }
        // 搜索栏
        .user-search {
          display: flex;
          align-items: center;
          width: 100%;
          margin: 0.1042rem 0;
          .search-input {
            position: relative;
            width: 1.6406rem;
            height: 0.2083rem;
            input {
              box-sizing: border-box;
              width: 1.6354rem;
              height: 0.2031rem;
              font-size: 0.0781rem;
              border: 0.0052rem solid #e0e0e0;
              // border-radius: 19px;
              padding: 0.0521rem 0.0521rem;
              color: #606266;
              outline: 0;
            }
            img {
              width: 0.0833rem;
              position: absolute;
              right: 0.1042rem;
              top: 0.0625rem;
            }
          }
          div {
            margin-right: 0.1563rem;
            span {
              font-size: 0.0833rem;
              font-family: Source Han Sans SC;
              font-weight: 400;
              color: #737373;
              margin-right: 0.0521rem;
              font-size: 0.0833rem;
            }
          }
        }
        // 分页器
        .pagination {
          display: flex;
          padding: 0.1042rem 0.1563rem 0.0521rem 0.0521rem;
          .pagination_left {
            display: flex;
            width: 2.0833rem;
            h6 {
              display: flex;
              align-items: center;
              color: #909499;
              font-size: 0.0833rem;
              h2 {
                color: #3f6ef2;
                font-size: 0.1042rem;
              }
            }
            .del {
              display: flex;
              align-items: center;
              justify-content: center;
              width: 0.4688rem;
              height: 0.1563rem;
              background: #ff6060;
              border-radius: 0.0208rem;
              font-size: 0.0938rem;
              color: #ffffff;
              margin-left: 0.1302rem;
            }
          }
          .pagination_rigth {
            width: 100%;
            display: flex;
            justify-content: right;
            span {
              font-size: 0.0833rem;
              font-family: Source Han Sans SC;
              font-weight: 400;
              color: #666666;
              margin-top: 0.0104rem;
            }
          }
        }
        // 表格
        thead tr th {
          font-size: 0.0833rem;
          font-family: Source Han Sans SC;
          font-weight: 400;
          color: #000000;
          background: #f2f8fa;
          .th {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: space-around;
            div {
              position: absolute;
              left: 0;
              display: flex;
              align-items: center;
              justify-content: center;

              input {
                width: 0.0938rem;
                height: 0.0938rem;
              }
            }
          }
          span {
            margin-right: 0.0781rem;
          }
        }

        table th,
        table td {
          box-sizing: border-box;
          height: 0.2188rem;
          border: 1px solid #dbdbdb;
          padding: 0.026rem 0.1042rem;
          font-size: 0.0729rem;
          font-family: Source Han Sans SC;
          font-weight: 400;
          color: #4d4d4d;
          img {
            width: 0.625rem;
            height: 0.4375rem;
          }
        }
        .td {
          span {
            cursor: pointer;
            margin-right: 0.099rem;
            width: 0.2969rem;
            height: 0.1094rem;
            font-size: 0.0729rem;
            font-family: Source Han Sans SC;
            font-weight: 400;
            text-decoration: underline;
            color: #3f6ef2;
          }
        }
        tbody tr td {
          width: 1.0417rem;
        }
        table {
          width: 100%;
          margin-bottom: 0.1563rem;
          border-collapse: collapse;
        }
      }
    }
  }
  // 空状态
  .null {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 520px;
    span {
      font-size: 0.0833rem;
      color: #b3b3b3;
    }
  }

  // 弹出框
  .dialog-center {
    width: 90%;
    margin: 0 auto;
    .div_img {
      display: flex;
      justify-content: center;
      margin-bottom: 0.1302rem;
    }
  }
  .dialog-footer {
    display: flex;
    justify-content: space-evenly;
    width: 70%;
    margin: 0 auto;
    .dialog-footer-bnt {
      width: 121px;
      height: 31px;
      color: #3f6ef2;
      border: 1px solid #3f6ef2;
      border-radius: 4px;
      background-color: #fff;
    }
    .btn2 {
      color: #fff;
      background-color: #3f6ef2;
    }
  }
  .abc {
    width: 368px;
    .el-select {
      width: 100%;
    }
  }
}
::v-deep .dialog .el-input__inner {
  box-sizing: border-box;
  width: 1.5625rem;
  height: 40px;
  font-size: 0.0781rem;
  border: 1px solid #e0e0e0;
  border-radius: 0px;
  padding: 10px 10px;
  color: #606266;
  outline: 0;
}
::v-deep .el-form-item__content {
  width: 1.5625rem;
}
/* 输入框样式  */
::v-deep .el-input__inner {
  box-sizing: border-box;
  width: 1.5625rem;
  height: 0.2031rem;
  font-size: 0.0781rem;
  border: 1px solid #e0e0e0;
  border-radius: 0px;
  padding: 10px 10px;
  color: #606266;
  outline: 0;
}
::v-deep .el-form-item {
  margin-bottom: 0.1146rem;
}
// 时间选择器样式
::v-deep .dialog .el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 1.5625rem;
}
::v-deep .el-icon-date:before {
  content: '';
}
::v-deep .el-dialog__header {
  border-bottom: 1px solid #e7e7e7;
}
/* 邀请客户弹窗 */
::v-deep .el-dialog--center .el-dialog__body {
  padding: 25px 0 30px;
}
::v-deep .el-input__prefix {
  left: 1.3802rem;
}
::v-deep .el-dialog {
  z-index: -1;
  // 小屏
  @media only screen and (min-width: 900px) and (max-width: 1535px) {
    width: 40%;
    // background-color: #f0f;
  }
  // 中屏
  @media only screen and (min-width: 1536px) and (max-width: 1900px) {
    width: 35%;
    // background-color: #ff0;
  }
  // 大屏
  @media only screen and (min-width: 1901px) and (max-width: 2580px) {
    width: 30%;
    // background-color: #f00;
  }
}
::v-deep .el-dialog--center {
  text-align: left;
}
::v-deep .el-image {
  width: 280px;
  height: 150px;
}
</style>
<style lang="scss">
.el-button--small {
  padding: 0;
}
.el-form-item__label {
  padding-right: 0.0313rem !important;
}
/* 分页器 */
.el-pagination.is-background .el-pager li {
  border-radius: 0.1042rem;
}
.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #3f6ef2;
}
.el-pagination {
  font-size: 0.0833rem;
  font-family: Source Han Sans SC;
  font-weight: 400;
  color: #666666;
}
.el-pagination.is-background .btn-next,
.el-pagination.is-background .btn-prev,
.el-pagination.is-background .el-pager li {
  background-color: transparent;
}
</style>
